import React from "react";
import styled from './HeadBar.module.less';
import { IconCloud, IconSettings } from '@arco-design/web-react/icon';
import { Button, Dropdown, Menu } from "@arco-design/web-react";
import BaseJson from '@/configs/base.json';


export interface IHeadBar {
    config?: any;
}

const dropList = (
    <Menu onClickMenuItem={(key) => window.localStorage.setItem('item', key)}>
        <Menu.Item key='item1'>主题1</Menu.Item>
        <Menu.Item key='item2'>主题2</Menu.Item>
    </Menu>
);

const HeadBar = (props: IHeadBar) => {

    return (
        <div className={styled.bar}>
            <div className={styled.barTitle}>
                <IconCloud style={{ marginRight: '8px' }}/>
                { BaseJson.platformName }
            </div>
            <Dropdown droplist={dropList} position='bl'>
                <Button type='text'>
                    <IconSettings style={{ fontSize: '20px' }}/>
                </Button>
            </Dropdown>
        </div>
    )
}


export default HeadBar;